<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点击后展示海量点</title>
    <style>
        @media (max-width: 768px) {
            .cc_from_item{
                width:100% !important;
            }

        }
        body,html,#container{
            height: 100%;
            margin: 0px;
            font:12px Arial;
        }
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;

        }
        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 14px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <title>犬运动轨迹统计图</title>
    <script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../DataTables/Buttons-1.5.4/css/buttons.dataTables.min.css">
    <script type="text/javascript" src="../../DataTables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
    <script src="../../bootstrap/js/bootstrap.js"></script>
</head>

<body  style="font-size: 12px;">
    <div class="row" style="padding-top: 20px;margin-top: 20px">
    <div class="col-md-12">
        <div class="box-body">
            <form role="form">
                <!-- text input -->
                <div class="form-group  has-success select-5">
                    <style>
                        @media (min-width: 992px){
                            .select-5 .form-control{
                                width:18%;
                                margin-left:15px;
                            }
                        }

                    </style>
                    <label style="padding-bottom: 5px">所属区域(*)</label>
                    <div class="row">
                        <select id="select_province" class="form-control col-md-2" style="margin-bottom: 5px">
                            <!--<option value="-1">请选择</option>-->
                            <option value="0" style="color: #00a65a">全国</option>
                            <option value="150000000000">内蒙古自治区</option>
                            <option value="510000000000">四川省</option>
                            <option value="530000000000">云南省</option>
                            <option value="540000000000">西藏自治区</option>
                            <option value="610000000000">陕西省</option>
                            <option value="620000000000">甘肃省</option>
                            <option value="630000000000">青海省</option>
                            <option value="640000000000">宁夏回族自治区</option>
                            <option value="650000000000">新疆维吾尔族自治区</option>
                            <option value="660000000">建设兵团</option>
                        </select>
                        <select id="select_city" class="form-control col-md-2" style="margin-bottom: 5px">
                            <option value="-1">请选择</option>
                        </select>
                        <select id="select_county" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                        <select id="select_village" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                        <select id="select_hamlet" class="form-control col-md-2" style="margin-bottom: 5px"><option value="-1">请选择</option></select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="box-body">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4" style="margin-bottom:5px;margin-left: 3px">
                        <span class="col-md-8" style="padding-left: 5px;padding-right: 0;">
                            <input type="text" class="form-control" placeholder="请选择项圈"  id="input_neckletid" disabled/>
                        </span>
                    <span class="col-md-3">
                            <button type="button" id="btn_neckletlist" class="btn btn-info btn-flat">批量选择项圈</button>
                        </span>
                </div>
                <div class="col-md-6 cc_from_item" style="margin-bottom:5px;width:500px;">
                    起止时间:
                    <input id="input_begintime" class="form-control cc_from_item" style="display:inline-block;width: 200px;" type="datetime-local" value="2019-06-23T00:00"/>
                    <span style="display:inline-block;">-</span>
                    <input id="input_endtime" class="form-control cc_from_item" style="display:inline-block;width:200px;" type="datetime-local" value="2019-06-24T10:00"/>
                </div>
                <div class="col-md-2" style="padding-right: 0;">
                    <span class="col-md-8" style="padding-left: 0;">
                        <button type="button" id="a_getdogstalist" class="btn btn-info btn-flat">绘制活动地图</button>
                    </span>
                    <span class="col-md-3">
                        <button type="button" id="btn_stanum" class="btn btn-info btn-flat">统计</button>
                    </span>
                </div>
            </div>

        </div>
    </div>
</div>
    <div class="content">
        <div id="pad-wrapper" class="users-list">
            <div class="row chart">
                <div class="col-md-12">
                    <div style="text-align: center;">
                        <h4 id="h3_logtitle"></h4>
                    </div>
                    <!--<div id="statsChart" style="height:750px"></div>-->
                    <div id="container"  style="height:750px"></div>
                </div>
            </div>
        </div>
        <div id="dogid" style="display: none">0</div>
        <div class="modal fade" id="dogInfoDiv" tabindex="-1" role="dialog">
            <div class="modal-dialog model80" >

                <div class="modal-content">
                    <div class="modal-body">
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" id="doglist" tabindex="-1" role="dialog">
            <div class="modal-dialog model80" >

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">信息详情</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form">
                            <table data-toggle="table" class="table  table-bordered" id="datatable" style="table-layout:fixed;">
                                <thead>
                                <tr>
                                    <th><input type="checkbox" name="select_all" id="select-all" class="select-all"></th>
                                    <th>犬主姓名</th>
                                    <th>犬名</th>
                                    <th>犬只政府编码</th>
                                    <th>项圈编号</th>
                                </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" onclick="choosedog()" type="button">
                            选择
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=39f6a5bd38f3167dc032e09b8e6d2a12'></script>
    <!-- UI组件库 1.0 -->
    <script src="../../bootstrap/js/main.js?v=1.0.11"></script>
    <script type="text/javascript">
        var viewdata;
        var necnum = 0;
        var posnum = 0;
        var lnglatlist = [];
        $(function () {
            var datares = {};
            // $.ajax({
            //     url: "/aidog/api/register/4",
            //     async:false,
            //     type: "GET",
            //     success: function (data) {
            //         datares = eval("(" + data + ")");
            //     }
            // });
            $.getJSON ("/aidog/adminlte/pages/ui_js/district.json", function (data)
            {
                datares = data;
            });

            //日历控件
            var date2 = new Date();
            date2.setDate(new Date().getDate() - 30);
            $("#input_endtime").val(timetrans((new Date()).valueOf()));
            $("#input_begintime").val(timetrans(date2));


            var districtcode = "";
            var level = "";
            $("#select_province").on('change', function () {
                districtcode = $(this).find('option:selected').val();
                // if(districtcode == "0"){
                //     $("#select_city").attr("disabled","disabled");
                //     $("#select_county").attr("disabled","disabled");
                //     $("#select_village").attr("disabled","disabled");
                //     $("#select_hamlet").attr("disabled","disabled");
                // }else{
                //
                // }
                level = "province";
                var selectvalue = $(this).find('option:selected').val();
                selectvalue = selectvalue.substring(0,2);
                $("#select_city").find("option").remove();
                var select_city = document.getElementById("select_city");
                select_city.options.add(new Option("请选择", "-1"));
                if ($('#modalselect_adminlevel').find('option:selected').text()!="省级") {
                    for (var i = 0; i < datares.data1.length; i++) {
                        if (datares.data1[i].districtcode.toString().substring(0, 2) == selectvalue) {
                            //遍历后台传回的结果，一项项往select中添加option
                            select_city.options.add(new Option(datares.data1[i].districtname, datares.data1[i].districtcode));
                        }
                    }
                }
                $("#select_county").find("option").remove();
                var select_county = document.getElementById("select_county");
                select_county.options.add(new Option("请选择", "-1"));

                $("#select_village").find("option").remove();
                var select_village = document.getElementById("select_village");
                select_village.options.add(new Option("请选择", "-1"));

                $("#select_hamlet").find("option").remove();
                var select_hamlet = document.getElementById("select_hamlet");
                select_hamlet.options.add(new Option("请选择", "-1"));
            });
            $("#select_city").on('change', function () {
                districtcode = $(this).find('option:selected').val();
                level = "city";
                var selectvalue = $(this).find('option:selected').val();
                $("#select_county").find("option").remove();
                selectvalue = selectvalue.substring(0, 4);
                var select_county = document.getElementById("select_county");
                select_county.options.add(new Option("请选择", "-1"));
                if ($('#modalselect_adminlevel').find('option:selected').text() != "市级") {
                    for (var i = 0; i < datares.data2.length; i++) {
                        if (datares.data2[i].districtcode.toString().substring(0, 4) == selectvalue) {
                            //遍历后台传回的结果，一项项往select中添加option
                            select_county.options.add(new Option(datares.data2[i].districtname, datares.data2[i].districtcode));
                        }
                    }
                }
                $("#select_village").find("option").remove();
                var select_village = document.getElementById("select_village");
                select_village.options.add(new Option("请选择", "-1"));

                $("#select_hamlet").find("option").remove();
                var select_hamlet = document.getElementById("select_hamlet");
                select_hamlet.options.add(new Option("请选择", "-1"));
            });
            $("#select_county").on('change', function () {
                districtcode = $(this).find('option:selected').val();
                level = "county";
                var selectvalue = $(this).find('option:selected').val();
                $("#select_village").find("option").remove();
                selectvalue = selectvalue.substring(0, 6);
                var select_village = document.getElementById("select_village");
                select_village.options.add(new Option("请选择", "-1"));
                if ($('#modalselect_adminlevel').find('option:selected').text() != "县级") {
                    for (var i = 0; i < datares.data3.length; i++) {
                        if (datares.data3[i].districtcode.toString().substring(0, 6) == selectvalue) {
                            //遍历后台传回的结果，一项项往select中添加option
                            select_village.options.add(new Option(datares.data3[i].districtname, datares.data3[i].districtcode));
                        }
                    }
                }
                $("#select_hamlet").find("option").remove();
                var select_hamlet = document.getElementById("select_hamlet");
                select_hamlet.options.add(new Option("请选择", "-1"));
            });
            $("#select_village").on('change', function () {
                districtcode = $(this).find('option:selected').val();
                level = "village";
                var selectvalue = $(this).find('option:selected').val();
                $("#select_hamlet").find("option").remove();
                selectvalue = selectvalue.substring(0, 9);
                var select_hamlet = document.getElementById("select_hamlet");
                select_hamlet.options.add(new Option("请选择", "-1"));
                if ($('#modalselect_adminlevel').find('option:selected').text() != "乡级") {
                    for (var i = 0; i < datares.data4.length; i++) {
                        if (datares.data4[i].districtcode.toString().substring(0, 9) == selectvalue) {
                            //遍历后台传回的结果，一项项往select中添加option
                            select_hamlet.options.add(new Option(datares.data4[i].districtname, datares.data4[i].districtcode));
                        }
                    }
                }
            });

            $("#select_hamlet").on('change', function () {
                districtcode = $(this).find('option:selected').val();
                level = "hamlet";
            });

            $("#a_getdogstalist").click(function () {
                var senddata = {};
                var necid = null;
                if($("#input_neckletid").val()!=null && $("#input_neckletid").val()!="" && $("#input_neckletid").val()!="请选择项圈"){
                    necid = $("#input_neckletid").val();
                    necnum = necid.split("|").length == 1?1:necid.split("|").length-1;
                }else{
                    alert("未选择项圈！");
                    necnum = 0;
                    posnum = 0;
                    return;
                }
                var begintime = $("#input_begintime").val()+":00";
                var endtime = $("#input_endtime").val()+":00";
                senddata.districtcode = districtcode;
                senddata.level = level;
                senddata.begintime = begintime;
                senddata.endtime = endtime;
                senddata.necid = necid;
                $.ajax({
                    url: "/aidog/api/getneclnglatlist",
                    type: "POST",
                    data: senddata,
                    beforeSend: function (request) {
                        request.setRequestHeader("token", window.localStorage.getItem("aidog_token"));
                    },
                    success: function (data) {
                        if (data.success) {
                            lnglatlist = [];
                            lnglatlist = data.data.lnglatlist;
                            drawMap();
                            posnum = data.data.lnglatlist.length;
                        }
                        else {
                            return;
                        }
                    }
                })
            });

            $("#btn_neckletlist").click(function () {
                var senddata = {};
                senddata.startitem = 1;
                senddata.pagesize = 100000;
                senddata.districtcode = districtcode;
                senddata.level = level;
                $.ajax({
                    url: "/aidog/api/getdoglist",
                    type: "POST",
                    data: senddata,
                    beforeSend: function (request) {
                        request.setRequestHeader("token", window.localStorage.getItem("aidog_token"));
                    },
                    success: function (data) {
                        if (data.data.data == null) {
                            alert(data.data.msg);
                            return;
                        }
                        else {
//                            var select_necklet = document.getElementById("select_necklet");
                            viewdata = $.extend(true,[],data.data.data);
                            for(var i = viewdata.length-1;i>=0;i--){
//                                if(data.data.data[i].necId!="-1"){
//                                    //遍历后台传回的结果，一项项往select中添加option
//                                    select_necklet.options.add(new Option(data.data.data[i].necId, data.data.data[i].dogId));

//                                }
                                viewdata[i].check = "<input name='check' id='\""+viewdata[i].necId+"\"' class=\"checkbox neccheck\" type=\"checkbox\" />";
                                if(viewdata[i].necId == "-1"){
                                    viewdata.splice(i,1);
                                }
                            }
                        }
                    }
                })

                $("#doglist").modal('show');
                $("#doglist").on("shown.bs.modal",function(){
                    var dt = $('#datatable').DataTable({
                        data: viewdata,
                        "jQueryUI": true,
                        'paging'      : true,
                        lengthMenu: [　//显示几条数据设置
                            [10, 20,30, 50,-1],
                            ['10 条', '20 条','30条', '50 条','全部']
                        ],
                        'searching'   : true,
                        'ordering'    : true,
                        "pageLength": 10, //每行显示记录数
                        'info'        : true,
                        'bAutoWidth'  : false,
                        "responsive": false,
                        //允许重建
                        "destroy": true,
                        "scrollX":true,
                        "oLanguage": {
                            buttons: {
                                pageLength: {
                                    _: "每页%d条记录",
                                    '-1': "显示所有记录"
                                }
                            },
                            "sLengthMenu": "每页显示 _MENU_ 条记录",
                            "sZeroRecords": "暂无数据",
                            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                            "sInfoEmtpy": "暂无数据",
                            "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                            "sProcessing": "正在加载中",
                            "sSearch": "搜索",
                            "sUrl": "",
                            "oPaginate": {
                                "sFirst": "第一页",
                                "sPrevious": " 上一页 ",
                                "sNext": " 下一页 ",
                                "sLast": " 最后一页 "
                            }
                        },
                        "scrollY": "200px",
                        "dom": 'Bfrtip',
                        "processing": true,
                        "columns": [
                            {
                                "class":          "details-control",
                                "orderable":      false,
                                "data":           "check",
                                "defaultContent": "",
                                "width": "1px"
                            },
                            { "data": "ownerName","width":"60px" },
                            { "data": "dogName","width":"60px"  },
                            { "data": "dogGovcode","width":"70px"  },
                            { "data": "necId","width":"70px"}
                        ]
                    });
                });

            });

            //页面上点击此属性，将当前页的列表数据全部选中
            $('.select-all').on('click', function () {
                if (this.checked) {
                    $('.checkbox.neccheck').each(function () {
                        this.checked = true;
                    });
                } else {
                    $('.checkbox.neccheck').each(function () {
                        this.checked = false;
                    });
                }
            });

            $("#btn_stanum").click(function () {
                alert("项圈数量： "+ necnum + "\r" + "位置总数： "+ posnum);
            });

        });

        function drawMap() {
            //加载相关组件
            AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function(DistrictCluster, PointSimplifier, $) {

                //启动页面
                initPage(DistrictCluster, PointSimplifier, $);
            });
        }

        function initPage(DistrictCluster, PointSimplifier, $) {
            //创建地图
            var map = new AMap.Map('container', {
                zoom: 4
            });

            var pointSimplifierIns = new PointSimplifier({
                map: map, //所属的地图实例
                zIndex: 110,
                autoSetFitView: false, //禁止自动更新地图视野
                getPosition: function(item) {

                    return item.position;
                },
                getHoverTitle: function(dataItem, idx) {
                    return idx + ': ' + dataItem.dataItem;
                },
                renderOptions: {
                    //点的样式
                    pointStyle: {
                        width: 6,
                        height: 6,
                        fillStyle: 'rgba(153, 0, 153, 0.38)'
                    },
                    //鼠标hover时的title信息
                    hoverTitleStyle: {
                        position: 'top'
                    }
                }
            });

            var distCluster = new DistrictCluster({
                zIndex: 100,
                map: map, //所属的地图实例

                getPosition: function(item) {

                    if (!item) {
                        return null;
                    }

                    var parts = item.split(',');

                    //返回经纬度
                    return [parseFloat(parts[0]), parseFloat(parts[1])];
                }
            });

            var currentAdcode = null;

            //监听区划面的点击
            distCluster.on('featureClick', function(e, feature) {


                currentAdcode = feature.properties.adcode;

                //获取该节点的聚合信息
                distCluster.getClusterRecord(currentAdcode, function(error, result) {

                    //currentAdcode已经更新，有新的点击
                    if (result.adcode !== currentAdcode) {
                        return;
                    }

                    //设置数据
                    pointSimplifierIns.setData(result.dataItems);
                })
            });

            distCluster.on('renderFinish', function(e, result) {

                var features = result.features, //当前绘制的features
                    currentAdcodeExists = false;

                for (var i = 0, len = features.length; i < len; i++) {
                    if (currentAdcode === features[i].properties.adcode) {

                        currentAdcodeExists = true;
                        break;
                    }
                }

                if (!currentAdcodeExists) {
                    //如果当前adcode没有绘制，清除？
                    //pointSimplifierIns.setData(null);
                }
            });


            window.distCluster = distCluster;

            function refresh() {

                var zoom = map.getZoom();

                //获取 pointStyle
                var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;

                //根据当前zoom调整点的尺寸
                pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);

                // var zoom = map.getZoom();

                // if (zoom < 10) {

                //     pointSimplifierIns.hide();

                // } else {

                //     pointSimplifierIns.show();
                // }
            }

            map.on('zoomend', function() {
                refresh();
            });

            refresh();

//                $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
//            $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
//
//                $('#loadingTip').remove();
//
//                var data = csv.split('\n');
//
//                distCluster.setData(data);
//            });
            var lines = [];
            var info = [];
            var datatempstr = "";
            for (var i = 0; i < lnglatlist.length; i++) {
//                var datatemp = [];
////                datatemp.push(datares[i].lng + "," + datares[i].lat);
//                datatemp.push(lnglatlist[i].lng);
//                datatemp.push(lnglatlist[i].lat);
//                lines.push(datatemp);
//                var infotemp = [];
//                infotemp.push(lnglatlist[i].deviceId);
//                infotemp.push(timetrans(lnglatlist[i].realtime));
//                info.push(infotemp);

                datatempstr = datatempstr + lnglatlist[i].lng + "," + lnglatlist[i].lat+"\n";
            }
            var data = datatempstr.split('\n');
            data.slice().pop();
            distCluster.setData(data);
        }

        function timetrans(date){
//    var date = new Date(date*1000);//如果date为13位不需要乘1000
            var date = new Date(date);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + 'T';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
//            var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
//            var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
//            return Y+M+D+h+m+s;
            return Y+M+D+h+m;
        }

        function choosedog() {
            var neccheck = $('.neccheck');
            var arr = []
            var spanarr = "";
            neccheck.map(function(item){
                if(neccheck[item].checked){
                    arr.push(neccheck[item].id);
                    spanarr += neccheck[item].id +"|";
                }
            })
            spanarr = spanarr.replace(/\"/g, "");
            $("#input_neckletid").val(spanarr);
            $("#doglist").modal('hide');
        }


    </script>
    <style type="text/css">
        .amap-ui-district-cluster-marker span{
            height: 100%;
        }
    </style>
</body>

</html>